<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="test"></div>

		<!-- 引入react核心库 -->
		<script src="js/react.development.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入react-dom 用于支持react操作dom -->
		<script src="js/react-dom.development.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入babel，用于将jsx转化成js。浏览器只识别js，不识别jsx -->
		<script src="js/17.0.1/babel.min.js" type="text/javascript" charset="utf-8"></script>

		<!-- 此处一定要写babel -->
		<script type="text/babel">
			// 1 创建类式组件
			class MyComponent extends React.Component{//myComponent继承了React.Component类
				render(){
					// render是放在哪里的？-MyComponent的原型对象上,供实例使用
					//render中的this是谁？-MyComponent的实例对象
					console.log('render中的this',this)
					return this.props.name
				}
			}
			
			
			// 渲染虚拟DOM到页面
			ReactDOM.render(<MyComponent name='123'/>,document.getElementById('test'))
			/* 执行了ReactDOM.render(<MyComponent/>)...之后，发生了什么？
			 1.React解析组件标签，找到了MyComponent组件。
			 2.发现组件时使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
			 3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
			 */
		</script>

	</body>
</html>
